<template>
  <div>
    <draggable
      v-model="menuData"
      item-key="id"
      group="people"
      :disabled="!system.isEdit"
      @start="drag = true"
      @end="drag = false"

    >
      <template #item="{ element }">
        <el-menu
          :default-active="defaultActive"
          class="el-menu-vertical-demo"
          @select="handleSelect"
          :class="system.isEdit ? 'isEdit' : ''"
        >
          <el-menu-item v-if="element.type === 2" :index="element[index]">
            <div :class="`icon iconfont icon-${element[icon]}`"></div>
            <span>{{ element[name] }}</span>
            <div class="show">
              <hover-menu
                :data="element"
                :menu="hoverMenuData"
                placement="top-start"
                @click="(e) => handleMenuClick(e, element)"
              ></hover-menu>
            </div>
          </el-menu-item>

          <el-sub-menu v-else-if="element.type === 1" :index="element[index]">
            <template #title>
              <span
                v-if="element[icon]"
                :class="`icon iconfont icon-${element[icon]}`"
              ></span>
              <span>{{ element[name] }}</span>
              <div class="show">
                <hover-menu
                  :data="element"
                  :menu="hoverMenuData"
                  placement="top-start"
                  @click="(e) => handleMenuClick(e, element)"
                ></hover-menu>
              </div>
            </template>
            <!-- <draggable :list="element.children" :move="checkMove" item-key="id">
              <template #item="{ element }">
                <el-menu-item :index="element[index]">
                  <span
                    v-if="element[icon]"
                    :class="`icon iconfont icon-${element[icon]}`"
                  ></span>
                  <span>{{ element[name] }}</span>
                  <div class="show">
                    <hover-menu
                      :data="element"
                      :menu="hoverMenuData"
                      placement="top-start"
                      @click="(e) => handleMenuClick(e, element)"
                    ></hover-menu>
                  </div>
                </el-menu-item>
              </template>
            </draggable> -->
          </el-sub-menu>

          <el-menu-item
            v-else-if="element.type === 3"
            :index="element[index]"
            @click="handleLinkClick(element.link)"
          >
            <div :class="`icon iconfont icon-${element[icon]}`"></div>
            <span>{{ element[name] }}</span>
            <div class="show">
              <hover-menu
                :data="element"
                :menu="hoverMenuData"
                placement="top-start"
                @click="(e) => handleMenuClick(e, element)"
              ></hover-menu>
            </div>
          </el-menu-item>
        </el-menu>
      </template>
    </draggable>
  </div>
</template>

<script lang="ts" setup>
import draggable from "vuedraggable";
import HoverMenu from "./hover-menu.vue";
import { ref, onBeforeMount, onUnmounted, PropType, computed } from "vue";
import mittBus from "/@/utils/mitt";
import { ElMessage } from "element-plus";
import { Grid, Plus, CirclePlusFilled } from "@element-plus/icons-vue";
import useStore from "/@/store/index";
const emit = defineEmits(['update:data','select'])
const { system } = useStore();

let props = defineProps({
  data: {
    type: Array as PropType<any[]>,
    required: true,
  },
  // 默认选中的菜单
  defaultActive: {
    type: String,
    default: "",
  },
  // 是否是路由模式
  router: {
    type: Boolean,
    default: false,
  },
  // 键名
  name: {
    type: String,
    default: "name",
  },
  icon: {
    type: String,
    default: "icon",
  },
  index: {
    type: String,
    default: "path",
  },
  children: {
    type: String,
    default: "children",
  },
});


let menuData = computed({
  get:()=> props.data,
  set:(value) => emit("update:data", value),
})


const hoverMenuData = [
  {
    name: "编辑",
  },
  {
    name: "添加子菜单",
  },
  {
    name: "删除",
  },
];
let drag = ref(false);
let myArray = ref<any>([]);
let defaultList = ref([
  { id: 1, name: "Jenny" },
  { id: 2, name: "kevin" },
  { id: 3, name: "lili" },
]);
// const emit = defineEmits(["select"]);

const handleSelect = (key: string, keyPath: string[]) => {
  emit("select", key, keyPath);
};

const handleMenuClick = (e: any, item: any) => {
  ElMessage.success(`当前菜单(${item.name})点击了${e.name}`);
};

const handleLinkClick = (link: string) => {
  window.open(link);
};
function changeLog(val: any) {
  console.log(val, "===changeLog");
}
function checkMove(val: any) {
  console.log(val, "===checkMove");
}
onBeforeMount(() => {
  // 监听顶部导航切换
  // mittBus.on('topNavChange', (res: string) => {
  //   console.log('当前页监听======res',res)
  // });
});
// 页面销毁时，关闭监听布局配置/i18n监听
onUnmounted(() => {
  // mittBus.off('topNavChange', () => {});
});
</script>
<style lang="scss" scoped>
.pl-1 {
  padding-left: 10px;
}

.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
}
.icon {
  margin-right: 10px;
}
.show {
  display: none;
  position: absolute;
  top: 0;
  right: 0;
  width: 20px;
  height: 20px;
  // background-color: black;
}
</style>

<style lang="scss">
.isEdit {
  .el-sub-menu__title:hover {
    box-sizing: border-box;
    position: relative;
    background-color: rgb(241, 139, 98) !important;
    .show {
      display: block;
    }
  }
  .el-menu-item:hover {
    box-sizing: border-box;
    position: relative;
    background-color: rgb(241, 139, 98) !important;
    .show {
      display: block;
    }
  }
}
</style>
